/*
 * @Author: yangzonglong
 * @Date: 2021-03-08 15:27:24
 * @version: v1.0.0
 * @Descripttion: 
 * @LastEditors: yangzonglong
 * @LastEditTime: 2021-06-17 14:28:40
 * @Auditor: 
 */
import React from 'react';
import { Form, Checkbox } from 'antd';
import FormItemController from './../components/FormItemController';
import OptionSetting from '../components/optionSetting/OptionSetting';
import useControlOptions from '../../hooks/useControlOptions';
import { CheckboxProps } from './Checkbox';
import { CheckboxChangeEvent } from 'antd/lib/checkbox';

const Controller = () => {

  const { options, changeFormItemProps, changeControlProps } = useControlOptions<CheckboxProps>('checkboxProps');

  function changeOptionWidthFlag(e: CheckboxChangeEvent) {
    changeControlProps('checkboxProps', {
      ...options.checkboxProps,
      optionWidthFlag: e.target.checked
    }, true);
  }

  return (
    <FormItemController hidePlaceholder onChange={changeFormItemProps} options={options?.formItemProps}>

      <OptionSetting editInModal showDefault isDefaultAll otherProps="checkboxProps" changeControlProps={(propsKey, value, flag) => {
        changeControlProps('checkboxProps', {
          ...value,
          defaultValue: value?.dataSource?.filter((item: any) => item.checked).map((item: any) => item.value)
        }, flag);
      }}
        options={options?.checkboxProps} />

      <Form.Item className="antd-form-item-row" label="选项等宽">
        <Checkbox
          onChange={changeOptionWidthFlag}
          checked={options?.checkboxProps?.optionWidthFlag} />
      </Form.Item>

    </FormItemController>
  );
};

export default Controller;